<template>
	<view>
		<u-sticky>
			<!-- 通知消息 -->
			<view style="height: 100px; display: flex; background-color: #f5fff0;">
				<!-- 图标 -->
				<view style="padding: 20px 10px 20px 20px;">
					<image :src="icon1" style="width: 60px;" mode="widthFix"></image>
				</view>
				<!-- 文本 -->
				<view style="height: 100px; width: 100%;">
					<view style="float: left;">
						<view style="padding: 18px 10px 0px 10px;">
							<text style="font-size: 18px; font-weight: bold;">通知消息</text>
						</view>

						<view style="padding: 0 10px 0px 10px;">
							<text style="font-size: 14px;">您的本月蚂力值已更新</text>
						</view>

						<view style="padding: 0 10px 0px 10px;">
							<text style="font-size: 14px;">09-06</text>
						</view>
					</view>

					<view style="float: right; margin: 32px 20px 0 0;">
						<view
							style="width: 36px; height: 36px; border-radius: 18px; background-color: #f56c6c; text-align: center;">
							<text style="font-size: 14px; line-height: 36px; font-weight: bold;">
								<!-- 要传的未读消息数 -->
								99+
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 互动消息 -->
			<view @click="toHuDongMsgPage()" style="height: 100px; display: flex; background-color: #f5fff0;">
				<!-- 图标 -->
				<view style="padding: 20px 10px 20px 20px;">
					<image :src="icon2" style="width: 60px;" mode="widthFix"></image>
				</view>
				<!-- 文本 -->
				<view style="height: 100px; width: 100%; border-top: 1px solid #e7e6e4;">
					<view style="float: left;">
						<view style="padding: 18px 10px 0px 10px;">
							<text style="font-size: 18px; font-weight: bold;">互动消息</text>
						</view>

						<view style="padding: 0 10px 0px 10px;">
							<text v-if="hdMsgShow.sendType == ''" style="font-size: 14px;">
								暂无互动消息
							</text>
							<text v-else-if="hdMsgShow.sendType == '回复'" style="font-size: 14px;">
								{{hdMsgShow.nickName}} 回复了您
							</text>
							<text v-else style="font-size: 14px;">
								{{hdMsgShow.nickName}} 给您留言了
							</text>
						</view>

						<view style="padding: 0 10px 0px 10px;">
							<text style="font-size: 14px;">{{hdMsgShow.date}}</text>
						</view>
					</view>

					<view style="float: right; margin: 32px 20px 0 0;">
						<view v-show="hdMessages.length != 0"
							style="width: 36px; height: 36px; border-radius: 18px; background-color: #f56c6c; text-align: center;">
							<!-- 未读消息数 -->
							<text v-if="hdMessages.length > 99" style="font-size: 14px; line-height: 36px; font-weight: bold;">
								99+
							</text>
							<text v-else style="font-size: 14px; line-height: 36px; font-weight: bold;">
								{{hdMessages.length}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 私信消息 -->
		<template v-for="(message, index) in messages">
			<view style="height: 100px; display: flex; background-color: #f4f4f5;">
				<!-- 头像 -->
				<view style="padding: 20px 10px 20px 20px;">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="u-page__image-item">
								<u--image shape="circle" :src="message.icon" width="60px" height="60px"></u--image>
							</view>
						</view>
					</view>
				</view>
				<!-- 文本 -->
				<view style="height: 100px; width: 100%; border-top: 1px solid #e7e6e4;">
					<view style="float: left; width: 60%;">
						<!-- 昵称 -->
						<view style="padding: 18px 10px 0px 10px;">
							<text style="font-size: 18px; font-weight: bold;">{{message.nickName}}</text>
						</view>
						<!-- 文本 -->
						<view style="padding: 0 10px 0px 10px;">
							<!-- <text style="font-size: 14px;">{{message.text}}</text> -->
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<u--text
									    :lines="1"
									    :text="message.text"
										size="14"
									></u--text>
								</view>
							</view>
						</view>
						<!-- 截短的日期 -->
						<view style="padding: 0 10px 0px 10px;">
							<text style="font-size: 14px;">{{shortDate[index]}}</text>
						</view>
					</view>
					<!-- 宝贝图片 -->
					<view style="float: right;">
						<view style="margin: 10px;">
							<u--image :src="message.goodImg" width="80px" height="80px" radius="5px"></u--image>
						</view>
					</view>
				</view>
			</view>

		</template>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon1: getApp().globalData.img_url + 'img%2Flogo%2F灯泡.png',
				icon2: getApp().globalData.img_url + 'img%2Flogo%2F点赞.png',
				user: {},
				shortDate: [],
				// 互动消息
				hdMsgShow: {
					nickName: '',
					sendType: '',
					date: '',
				},
				hdMessages: [],
				// 私信消息
				messages: [{
					userId: '2001',
					nickName: '测试昵称001',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2Fpp3.png',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F10001%2F1%2FQQ%E6%88%AA%E5%9B%BE20240910180916.png', // 图片只要第一张
					text: '便宜点出吧好哥哥,便宜点出吧好哥哥,便宜点出吧好哥哥,',
					date: '2024-09-12 16:03:11'
				}, {
					userId: '2002',
					nickName: '测试昵称002',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F5.jpg',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F10001%2F1%2FQQ%E6%88%AA%E5%9B%BE20240910180938.png', // 图片只要第一张
					text: '给点给点',
					date: '2024-09-11 12:25:33'
				}, {
					userId: '2001',
					nickName: '测试昵称001',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2Fpp3.png',
					good: { // 宝贝信息要拿一点 点击图片跳转进宝贝页
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '便宜点出吧好哥哥',
					date: '2024-09-12 16:03:11'
				}, {
					userId: '2002',
					nickName: '测试昵称002',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F5.jpg',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '给点给点',
					date: '2024-09-11 12:25:33'
				}, {
					userId: '2001',
					nickName: '测试昵称001',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2Fpp3.png',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '便宜点出吧好哥哥',
					date: '2024-09-12 16:03:11'
				}, {
					userId: '2002',
					nickName: '测试昵称002',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F5.jpg',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '给点给点',
					date: '2024-09-11 12:25:33'
				}, {
					userId: '2001',
					nickName: '测试昵称001',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2Fpp3.png',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '便宜点出吧好哥哥',
					date: '2024-09-12 16:03:11'
				}, {
					userId: '2002',
					nickName: '测试昵称002',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F5.jpg',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: '', // 图片只要第一张
					text: '给点给点',
					date: '2024-09-11 12:25:33'
				}]
			}
		},
		methods: {
			// 日期截短显示
			dateHandler(messages, shortDate) {
				let date = [];
				for (let i = 0; i < messages.length; i++) {
					let dateStr = messages[i].date;
					let month = dateStr.split(' ')[0].split('-')[1];
					let day = dateStr.split(' ')[0].split('-')[2];
					let date = month + '-' + day;
					
					shortDate.push(date);

					// this.shortDate.push(date);
				}
			},
			// 获取通知消息
			
			// 获取互动消息
			getHuDongMessages() {
				var that = this;
				uni.request({
					method: 'GET',
					url: getApp().globalData.url + '/message/huDong?userId=' + this.user.id,
					success(res) {
						// console.log(res.data)
						that.hdMessages = res.data;
						// 本地存一份
						uni.setStorage({
							key: 'hdMessages',
							data: res.data
						});
						// console.log(that.hdMessages);
						let length = that.hdMessages.length;
						if (length != 0) {
							that.hdMsgShow.nickName = that.hdMessages[length-1].nickName;
							that.hdMsgShow.sendType = that.hdMessages[length-1].sendType;
							let dateStr = that.hdMessages[length-1].date;
							let month = dateStr.split(' ')[0].split('-')[1];
							let day = dateStr.split(' ')[0].split('-')[2];
							that.hdMsgShow.date = month + '-' + day;
						}
						
					}
				})
			},
			// 互动按钮跳转
			toHuDongMsgPage() {
				uni.navigateTo({
					url: '/pages/MsgHuDongPage/MsgHuDongPage'
				});
			}
		},
		onLoad() {
			// 获取登录状态
			let that = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					that.user = res.data;
					console.log(that.user)
				},
				fail() {
					that.user = null;
				}
			});

			// 截短日期
			this.dateHandler(this.messages, this.shortDate);
			
			// 获取互动消息
			this.getHuDongMessages();
		}
	}
</script>

<style>

</style>